import { useEffect, useState } from 'react';
import { ColorPicker,  Flex, Input } from 'antd';

export const ColorInput = ({ value, onChange }) => {
    const [colorValue, setColorValue] = useState(value || '#1677ff');

    // 当外部 value 变化时更新内部状态
    useEffect(() => {
        if (value) {
            setColorValue(value);
        }
    }, [value]);

    const handleColorChange = (color) => {
        const hexColor = color.toHexString();
        setColorValue(hexColor);
        onChange?.(hexColor);
    };

    const handleInputChange = (e) => {
        const inputValue = e.target.value;
        setColorValue(inputValue);
        onChange?.(inputValue);
    };

    return (
        <Flex>
            <ColorPicker value={colorValue} size="large" onChange={handleColorChange} />
            <Input value={colorValue} onChange={handleInputChange} style={{ width: '60%' }} />
        </Flex>
    );
};
